<template>
	<div class="map-tool">
		<div
			v-for="item in toolList"
			:key="item.content"
			class="tool"
			:class="{ active: activeTool === item.type }"
			@click="handleEvent(item.type)"
		>
			<i>
				<svg-icon :name="item.iconName" />
			</i>
			<span>{{ item.content }}</span>
		</div>
		<el-dialog
			v-model="dialogVisible"
			title="下载影像"
			width="300px"
			append-to-body
			:before-close="handleClose"
		>
			<div>
				{{ pickftp }}
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="handleAdd">确定</el-button>
					<el-button @click="handleClose">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onDeactivated } from "vue";
import mapTool from "@/utils/maptools/map";
import { useTaskStore } from "@/store";
import { ElMessage, ElMessageBox } from "element-plus";
import { del, download, get } from "@/utils/request";
enum URL {
	downloadData = "/common/download/ftpcut",
}
const downloading = ref(false);
const props = defineProps({
	mIndex: {
		type: String,
		default: "",
	},
});
const dialogVisible = ref(false);
// 地图工具列表
const toolList = [
	{
		type: "line",
		iconName: "measure_line",
		content: "测距",
	},
	{
		type: "area",
		iconName: "measure_area",
		content: "测面积",
	},
	{
		type: "clear",
		iconName: "measure_clear",
		content: "清除",
	},
	{
		type: "download",
		iconName: "measure_download",
		content: "下载",
	},
];

// 激活的工具
const activeTool = ref("");
const handleClose = () => {
	dialogVisible.value = false;
	mapTool.clearMeasureResult(props.mIndex);
	mapTool.removeMeasureDrawInteraction(props.mIndex);
	mapTool.removeMapPointerMove(props.mIndex);
	mapTool.removeAllTooltip();
	activeTool.value = "";
};
const taskStore = useTaskStore();
const pickftp = computed(() => taskStore.viewftp.filePath);
const handleAdd = () => {
	downloading.value = true;
	let wkt = mapTool.geometryToWkt(chooseGeo.value);
	let filePath = pickftp.value;
	let baseURL = BASE_CONFIG["baseURL"];
	console.log(filePath, "filePath");

	window.location.href =
		baseURL +
		"/common/download/ftp?" +
		"filePath=" +
		encodeFilePath(filePath) +
		"&wkt=" +
		wkt?.toString();
	handleClose();
	// download({
	// 	url: URL.downloadData,
	// 	params: {
	// 		filePath,
	// 		wkt,
	// 	},
	// }).then((res) => {
	// 	ElMessage.success("下载成功");
	// 	downloading.value = false;
	// 	handleClose();
	// });
};
const encodeFilePath = (filePath: any) => {
	const normalizedPath = filePath.replace(/\\/g, "\\\\");
	return encodeURIComponent(normalizedPath);
};
const chooseGeo = ref(null) as any;
// 工具栏点击处理
const handleEvent = (type: string) => {
	switch (type) {
		case "line":
		case "area": {
			mapTool.removeMeasureDrawInteraction(props.mIndex);
			mapTool.removeMapPointerMove(props.mIndex);
			mapTool.removeAllTooltip();
			if (activeTool.value === type) {
				activeTool.value = "";
			} else {
				activeTool.value = type;
				mapTool.addMapPointerMove(props.mIndex);
				mapTool.createHelpTooltip(props.mIndex);
				mapTool.createMeasureTooltip(props.mIndex);
				mapTool.addMeasureInteraction(props.mIndex, type, function () {
					// 先移除再添加是为了给鼠标绑定新的提示
					mapTool.removeMapPointerMove(props.mIndex);
					mapTool.addMapPointerMove(props.mIndex);
					mapTool.createHelpTooltip(props.mIndex);
					mapTool.createMeasureTooltip(props.mIndex);
				});
			}
			break;
		}
		case "clear": {
			mapTool.clearMeasureResult(props.mIndex);
			mapTool.removeMeasureDrawInteraction(props.mIndex);
			mapTool.removeMapPointerMove(props.mIndex);
			mapTool.removeAllTooltip();
			activeTool.value = "";
			break;
		}
		case "download": {
			if (!pickftp.value) {
				ElMessage.error("请选择FTP路径");
				return;
			}
			mapTool.removeMeasureDrawInteraction(props.mIndex);
			mapTool.removeMapPointerMove(props.mIndex);
			mapTool.removeAllTooltip();
			if (activeTool.value === type) {
				activeTool.value = "";
			} else {
				activeTool.value = type;
				mapTool.addMapPointerMove(props.mIndex, "点击开始绘制下载区域");
				mapTool.createHelpTooltip(props.mIndex);
				mapTool.createMeasureTooltip(props.mIndex);
				mapTool.addMeasureInteraction(props.mIndex, "area", function (evt: any) {
					// 先移除再添加是为了给鼠标绑定新的提示
					mapTool.removeMapPointerMove(props.mIndex);
					mapTool.addMapPointerMove(props.mIndex);
					mapTool.createHelpTooltip(props.mIndex);
					mapTool.createMeasureTooltip(props.mIndex);
					dialogVisible.value = true;
					chooseGeo.value = evt;
				});
			}
			break;
		}
	}
};
onDeactivated(() => {
	mapTool.clearMeasureResult(props.mIndex);
	mapTool.removeMeasureDrawInteraction(props.mIndex);
	mapTool.removeMapPointerMove(props.mIndex);
	mapTool.removeAllTooltip();
	activeTool.value = "";
});
</script>

<style lang="scss" scoped>
.map-tool {
	position: relative;
	padding: 2px 4px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(6, 19, 44, 0.8);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	border: 1px solid #3989c2;
	&::before {
		position: absolute;
		top: 2px;
		width: 54px;
		height: 7px;
		content: "";
		border-radius: 4px;
		background: linear-gradient(
			180deg,
			rgba(42, 122, 207, 0.6391) 0%,
			rgba(1, 12, 18, 0.5698) 100%
		);
	}
	.tool {
		position: relative;
		margin: 9px 0;
		width: 48px;
		height: 54px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: rgba(193, 242, 255, 0.6);
		cursor: pointer;
		&::after {
			position: absolute;
			bottom: -9px;
			content: "";
			width: 42px;
			height: 1px;
			background: rgba(255, 255, 255, 0.2);
		}
		&:last-child {
			&::after {
				display: none;
			}
		}
		&:hover {
			color: #c1f2ff;
		}
		i {
			font-size: 20px;
		}
		span {
			margin-top: 4px;
			display: inline-block;
			width: 30px;
			text-align: center;
		}
		&:nth-child(2) {
			span {
				width: 42px;
			}
		}
		&.active {
			background: linear-gradient(180deg, rgba(35, 136, 244, 0.6) 0%, rgba(0, 123, 255, 0.6) 100%);
			color: #fff;
		}
	}
}
</style>
